<template>
  <div class="build">
    <van-nav-bar
		title="影像升级类型"
		left-arrow
		@click-left="onClickLeft"
		/>
    <div class="build-type-panel" style="margin-top: 45px;">
      <van-panel
        v-for="(buildTypeItem, index) in buildTypeLists"
        :key="index"
        :title="buildTypeItem.title"
        :desc="buildTypeItem.desc"
        :class="{ac: index == indexs}"
        @click.native="selectedTypeItem(index)">
      </van-panel>
    </div>
     
    <van-button size="large" @click="toBuilding">确认升级</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indexs: '',
      goodname:"升级影像",
        goodprice:0,
        goodnum:1,
        gooddesc:"升级影响不同，照片与视频的上传数量不同",
      buildTypeLists: [
        {
          title: '免费',
          desc: '可在纪念馆生前照片栏中上传10张照片、生前视频中上传2个3分钟内视频'
        },
        {
          title: '收费200元',
          desc: '除可获免费的相应服务外，另可在吊唁影集中上传 20张照片、在吊唁视频中上传5个3分钟内的视频，以及在祭奠留影中上传10张照片、祭奠视频中上传2个3分钟内的视频'
        },
        {
          title: '收费500元',
          desc: '除可获免费的相应服务外，可在吊唁影集中上传 50张照片、在吊唁视频中上传15个3分钟内的视频，以及在祭奠留影中上传20张照片、祭奠视频中上传5个3分钟内的视频'
        },
        {
          title: '收费1000元',
          desc: '除可获免费的相应服务外，可在吊唁影集中上传 100张照片、在吊唁视频中上传30个3分钟内的视频，以及在祭奠留影中上传50张照片、祭奠视频中上传10个3分钟内的视频'
        }
      ],
      mid: ''
    }
  },
  created () {
    this.indexs = this.$route.query.value
    this.mid = JSON.parse(window.localStorage.getItem('item')).id
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    selectedTypeItem (index) {
      this.indexs = index
      this.buildTypeLists.forEach((el,elIndex) => {
        this.$set(this.buildTypeLists, elIndex, Object.assign(this.buildTypeLists[elIndex], {class: {actived: false}}))
      })
      this.$set(this.buildTypeLists, index, Object.assign(this.buildTypeLists[index], {class: {actived: true}}))
      // console.log(this.buildTypeLists)
    },
    toBuilding () {
      window.localStorage.removeItem('movicetype')
    //   this.$router.push('/building-edit')
    if (this.$route.query.value >= this.indexs) {
                this.$toast('请选择更高的进行升级')
          } else {
              // this.$router.push('/car')
              window.localStorage.setItem('movicetype', this.indexs)
              // alert('升级成功')
              var that = this
              
              switch (this.indexs) {
                case 0:
                  this.goodname = '免费'
                  this.goodprice = 0
                  break;
                case 1:
                  this.goodname = '升级成200元的服务'
                  this.goodprice = 200
                  break;
                case 2:
                  this.goodname = '升级成500元的服务'
                  this.goodprice = 500
                  break;
                case 3:
                  this.goodname = '升级成1000元的服务'
                  this.goodprice = 1000
                  break;
                default:
                  break;
              }
              this.$axios.get("/huainianwang/shoppingCart/app/addShoppingCart?mid="+this.mid+"&goodname="+this.goodname+"&goodprice="+this.goodprice+"&goodnum="+this.goodnum+"&gooddesc="+this.gooddesc+"")
                    .then(function(res){
                        // alert(1)
                        that.$toast('升级成功，您可以返回继续上传')
                         that.$router.go(-1)
                    },function(err){
                    }).catch(function(error){
                    });
              // 
              // this.$router.go(-1)
          }
      // alert('升级成功')
      // this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.van-button--large {
	background: #31a2c8;
	color: #fff;
	height: 35px;
	line-height: 35px;
}
.van-cell-group.van-hairline--top-bottom.van-panel.actived{
  .van-cell.van-panel__header {
    background-color: rgba(222, 176, 108, 0.3411764705882353);
  }
}
</style>
<style lang="scss">
.van-nav-bar{
	background: #31a2c8;
	color: #fff;
}
.van-nav-bar .van-icon{
	color: #fff;
}
.build .van-cell__label{
  color: red !important;
}
.ac .van-cell{
 /* .van-cell-group.van-hairline--top-bottom.van-panel.actived */
 background: #d4edf1 !important;
 color: #4a4a4a !important;
 font-weight: 600 !important;
 font-size: 19px !important;
 line-height: 30px;
 .van-cell__label {
   color: #2d7494 !important;
   font-size: 14px !important;
   line-height: 20px ;
 }
}
</style>
